<template>
    <el-container class="source-container" direction="vertical">
        <el-container>
            <HeaderBtnGroup @handleClick="handleHeaderClick" :config="headerConfig">
            </HeaderBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table :data="targets" v-loading="loadingShow">
                    <el-table-column fixed label="序号" type="index" prop="id"></el-table-column>
                    <el-table-column label="名称" width="120px" prop="name">
                        <template slot-scope="scope">
                            <span>{{ showName(scope.row) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="语言" width="50px" prop="lang">
                        <template slot-scope="scope">
                            <span>{{ showLangName(scope.row) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="数据字段" width="70px" prop="sourceField"></el-table-column>
                    <el-table-column label="存储字段" width="70px" prop="targetField"></el-table-column>
                    <el-table-column label="关键词" prop="keywords">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.keywords">{{
                ellipsisContent(row.keywords, 80) }} <el-link v-if="row.keywords" type="primary"
                                    underline>more</el-link>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="模板" width="300px" prop="template">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.template">{{
                ellipsisContent(row.template, 250) }} <el-link type="primary" underline>more</el-link>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="210" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleEnable(scope.row)">{{ scope.row.enable ?
                "失效" : "生效" }}</el-button>
                            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
        <el-dialog title="添加提示语" :visible.sync="dialogFormVisible" destroy-on-close @close="handleDialogClose"
            width="600px">
            <el-form :model="form" ref="addForm" label-position="right">
                <el-form-item label="平台名称" :label-width="formLableWidth">
                    <el-select v-model="form.platformId" placeholder="请选择平台">
                        <el-option v-for="item in platforms" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="语言" :label-width="formLableWidth">
                    <el-select v-model="form.lang" placeholder="请选择语言">
                        <el-option v-for="item in langs" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="提示名称" :label-width="formLableWidth">
                    <el-input v-model="form.name" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="数据字段" :label-width="formLableWidth">
                    <el-input v-model="form.sourceField" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="存储字段" :label-width="formLableWidth">
                    <el-input v-model="form.targetField" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="关键词" :label-width="formLableWidth">
                    <el-input v-model="form.keywords" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="模板" :label-width="formLableWidth">
                    <el-input type="textarea" v-model="form.template" auto-complete="off" size="mini"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="addData('addForm')" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<style lang="scss">
.source-container {

    .radio-container {
        margin-left: 0px;

        .direction-hor {
            display: inline-block;
            width: 100px;
            margin-bottom: 0px !important;

            .el-form-item__label {
                margin-left: 20px;
                width: auto;
            }

            .el-form-item__content {
                width: auto;
            }
        }
    }

    .el-dialog__body {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }
}
</style>

<script>
import { DictDao } from "@/dao/dictDao"
import { DeepCopy } from "@/utils/Utils"
import { PromotionDao } from "@/dao/promotionDao"
import { funcFns } from "@/puppeteer/utils/funtion"
import { HeaderBtnMixin } from "@/mixins/HeaderBtnMixin"
import HeaderBtnGroup from "@/components/Common/HeaderBtnGroup"
import { DictType, Lang, UsageScope } from "@/entities/Constant"

export default {
    name: "PromotionList",
    mixins: [HeaderBtnMixin],
    props: {
        type: {
            type: Number,
            default: DictType.Platform,
        },
    },
    components: {
        HeaderBtnGroup,
    },
    data() {
        return {
            langs: [],
            targets: [],
            platforms: [],
            loadingShow: true,
            formLableWidth: "100px",
            form: PromotionDao.initialForm(),
            whereDict: {
                enable: -1,
            },
            headerConfig: {
                pageSize: PromotionDao.pageSize,
                statusBtns: [
                    { status: -1, name: "全部", key: "*" },
                    { status: 1, name: "生效", key: "enable" },
                    { status: 0, name: "失效", key: "enable" },
                ]
            }
        }
    },
    mounted() {
        DictDao.Platforms(this.type, UsageScope.Ai).then((res) => {
            console.log("play")
            this.platforms = res
            this.langs = Lang.Options()
            this.getTargets(this.page)
        })
    },
    methods: {
        getTargets(page) {
            this.loadingShow = true
            PromotionDao.fetchCount(this.whereDict, page).then((res) => {
                this.loadingShow = false
                this.targets = res.datas
                this.headerConfig.total = res.count
            })
        },
        handleEdit(row) {
            this.form = DeepCopy(row)
            this.dialogFormVisible = true
        },
        handleEnable(row) {
            let data = DeepCopy(row)
            data.enable = data.enable == 0 ? 1 : 0
            PromotionDao.save(data).then(res => this.getTargets(this.page))
        },
        handleDelete(id) {
            PromotionDao.delete(id).then(res => this.getTargets(this.page))
        },
        handleDialogClose() {
            this.form = PromotionDao.initialForm()
        },
        handleStatusFilter(row) {
            if (row.key == "*") {
                this.whereDict.enable = -1;
            } else {
                this.whereDict[row.key] = row.status
            }
            this.getTargets(this.page)
        },
        showLangName(row) {
            let obj = this.langs.find(item => item.id == row.lang)
            return obj ? obj.name : ""
        },
        showName(row) {
            let obj = this.platforms.find(item => item.id == row.platformId)
            return obj ? `${obj.name}-${row.name}` : row.name
        },
        addData(formName) {
            const formData = DeepCopy(this.form)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false
                    PromotionDao.save(formData).then(() => {
                        this.getTargets(this.page)
                        this.form = PromotionDao.initialForm()
                    })
                }
            })
        },
        ellipsisContent(content, length) {
            return funcFns.ellipsisContent(content, length)
        },
    },
}
</script>
